<script setup lang="ts">
import { messageListFn } from '@/api/talk';
import { onMounted } from 'vue';
import type{ Ref } from 'vue';
import { ref } from 'vue';
import { computed } from 'vue';
import type{ iState } from '@/type/talkType';
import { reactive } from 'vue';
import router from '@/router';
const issearch:Ref<boolean>=ref(false)
let value:string =''
const state: iState = reactive({
  messageData: [],
});
const classtype=computed(()=>{
  return issearch.value==true?"my-search2":"my-search"
})  
function cancelCilck(){
setTimeout(() => {
  issearch.value=false;
  value =''
}, 0);
}
onMounted(() => {
  messageListFn().then(res=>{
    console.log(res.data);
    state.messageData=res.data.messageList
    console.log(state.messageData);
    for (let i = 0; i < state.messageData.length; i++) {
      if(state.messageData[i].time>60&&state.messageData[i].time<3600){
        var time =Math.floor(state.messageData[i].time/60)
       state.messageData[i].calctime=`${time}分钟以前`
      
      }else if(state.messageData[i].time>3600&&state.messageData[i].time<86400){
        var time =Math.floor(state.messageData[i].time/3600)
        state.messageData[i].calctime=`${time}小时以前`
   
      }else{
        var time =Math.floor(state.messageData[i].time/86400)
        state.messageData[i].calctime=`${time}天前`
      }
    }
    const updateTimes = () => {
      state.messageData.forEach(item => {
        const currentTime = item.time 
        if (currentTime < 60) {
          item.calctime = '刚刚';
        } else if (currentTime < 3600) {
          item.calctime = `${Math.floor(currentTime / 60)}分钟以前`;
        } else if (currentTime < 86400) {
          item.calctime = `${Math.floor(currentTime / 3600)}小时以前`;
        } else {
          item.calctime = `${Math.floor(currentTime / 86400)}天前`;
        }
        item.time++
      });
    };
    setInterval(updateTimes, 60000); 
    
  })
})
function messageClick(){
  router.push('/talkwindow')
}
</script>
<template>
<main class="box">
  <header class="header">
      <slot name="left"></slot>
      <span>消息中心</span>
      <slot name="right"></slot>
  </header>
  <div class="content"> 
    <van-search 
:class="classtype" 
@click="issearch=true" 
v-model="value" 
placeholder="搜索" 
show-action
background="rgba(255, 0, 0, 0)" 
shape="round" >
<template #action>
    <div v-show="issearch==true" class="cancel" @click="cancelCilck">取消</div>
  </template>
</van-search>
<div class="messagerbox" v-for="item in state.messageData":key=item.name  @click="messageClick">
  <van-badge :content="item.num"  class="messagebage" position="top-right" >
    <img class="messageimg" :src="item.img" alt="">
</van-badge>
<div class="messsagename">{{ item.name }}</div>
<div class="messagetime">{{ item.calctime }}</div>
<div class="messagetext">{{ item.text }}...</div>
</div>
  </div>
</main>
</template>
<style lang="scss" scoped>
.messagerbox{
  width: 100%;
  height: 0.6rem;
  background-color: #fbfbfb;
  position: relative;
  .messagebage{
    position: absolute;
  left: 10px;
  top: 10px;
  }
  .messageimg{
  width: 40px;
  
}
.messsagename{
  font-weight: 800;
  position: absolute;
  left: 70px;
  top: 10px;
}
.messagetext{
  position: absolute;
  font-size: 14px;
  left: 70px;
  top: 40px;
}
.messagetime{
  position: absolute;
  color: #b29999;
  right: 40px;
  top: 10px;
}
}

</style>